<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ↓ 这里的标题会显示在浏览器标签页上 -->
    <title>Ghost - Audio Profile</title>
    <style>
        /* 引入和ID卡一致的字体，保持风格统一 */
        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

        body {
            margin: 0;
            padding: 20px;
            background-color: #121212; /* 深邃的背景色 */
            color: #E0E0E0; /* 柔和的文字颜色 */
            font-family: 'IBM Plex Mono', monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
        }

        .container {
            max-width: 600px;
        }

        /* 角色名称样式 */
        h1 {
            color: #C0C0C0; /* 银色 */
            letter-spacing: 2px;
            margin-bottom: 30px;
        }

        /* 独白文字样式 */
        blockquote {
            font-size: 1em;
            line-height: 1.8;
            border-left: 3px solid #555;
            padding-left: 20px;
            margin: 0 0 30px 0;
            font-style: italic;
            text-align: left;
        }

        /* 音频播放器样式 */
        audio {
            width: 100%;
            margin-top: 20px;
            /* 一个小技巧让默认播放器变成浅色，以适应深色背景 */
            filter: invert(1);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- ==================== 您需要修改的部分 START ==================== -->


        <!-- 2. 修改角色名称 -->
        <h1>Ghost</h1>

        <!-- 3. 粘贴独白文字稿 -->
        <blockquote>
            They call me Ghost. Rightly so. You don't see me. You don't hear me. You only see what's left after I'm gone. I'm the bloke they send in when the line gets blurry... when a message needs to be sent without a return address. Don't try to know who I am. Just know what I do. And pray you're not on my list. Out.
        </blockquote>
        <blockquote>
            他们叫我“幽灵”。名副其实。你看不见我，也听不见我。你只能看见我离开后留下的痕迹。当界线变得模糊…当需要寄出一封没有回邮地址的信时，他们就会派我出场。别试图了解我是谁，只需知道我的手段。然后祈祷…你不在我的名单上。完毕。
        </blockquote>

        <!-- 4. 替换音频文件链接，并添加 autoplay 属性 -->
        <audio controls autoplay>
            <source src="ghost.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放。
        </audio>

        <!-- ==================== 您需要修改的部分 END ==================== -->
    </div>
</body>
</html>